<template>
  <div class="cart">
    <template v-if="myCart.length">
      <!-- <div class="cart-title">我的购物车</div> -->
      <div class="cart-tb">
        <el-row class="cart-bd" v-for="(i, idx) in myCartList" :key="i.id">
          <el-col :span="5" class="cart-col goods">
            <t-img :src="bindIMG(i.file.filename)" alt="" customClass="img" />
          </el-col>
          <el-col :span="8" class="cart-col info">
            <p class="goods-title" @click="gotoDetail(i)">{{ i.goods.name }}</p>
            <p class="goods-desc">{{ i.goods.description }}</p>
          </el-col>
          <el-col :span="5" class="cart-col price"><span>{{ i.goods.price | $ }}</span>
          </el-col>
          <el-col :span="6" class="cart-col handle">
            <el-popconfirm title="是否要将商品从购物车中移出？" @confirm="removeCart(i)">
              <a href="javascript:;" class="link-del" slot="reference">移出购物车</a>
            </el-popconfirm>
            <el-popconfirm title="是否要购买商品" @confirm="purchaseGoods(i)">
              <a href="javascript:;" class="link-add" slot="reference" :class="{ disabled: flagList[idx] }">{{
                flagList[idx] ? '失效' : '购买'
              }}</a>
            </el-popconfirm>
          </el-col>
        </el-row>
      </div>

      <div class="cart-tool">
        <el-popconfirm title="确定要清空购物车吗？" @confirm="clearShopCar" style="margin-right:auto;">
          <a href="javascript:;" class="cart-clear" slot="reference">清空购物车</a>
        </el-popconfirm>

        <div class="cart-total">
          <p class="cart-total__p">
            共 <span class="num">{{ totalNum }}</span> 件商品
          </p>
          <p class="cart-total__p">
            <span class="price">{{ totalPrice | $ }}</span>
          </p>
        </div>
        <el-popconfirm title="是否要购买商品" @confirm="purchaseAll">
          <button class="btn-all" :class="{ disabled: totalNum === 0 }" slot="reference">立即购买</button>
        </el-popconfirm>
      </div>
    </template>

    <el-empty class="md-empty" v-else>
      <template #description>
        <p>购物车为空</p>
        <router-link :to="{ name: 'bookCenter' }" class="link">前往图书中心 </router-link>
      </template>
    </el-empty>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapState } from 'vuex'
import { bindIMG } from '@utils'
export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['myCart', 'userOrder', 'currentUser']),
    ...mapGetters(['getBookById', 'getFileById']),
    totalPrice () {
      return (
        this.myCartList &&
        this.myCartList.reduce((pre, nxt) => {
          return pre + Number(nxt.goods.price)
        }, 0)
      )
    },
    totalNum () {
      return this.myCartList.length
    },
    myCartList () {
      return this.myCart.map((i) => {
        const goods = this.getBookById(i.goodsId)
        const file = this.getFileById(i.goodsId)
        return {
          ...i,
          goods,
          file
        }
      })
    },
    flagList () {
      return this.myCartList.map((i) => {
        const isPurchase = this.userOrder.findIndex((j) => i.goodsId === j.goodsId && i.userId === j.userId)
        return isPurchase !== -1
      })
    }
  },
  methods: {
    ...mapActions(['fetchMyCart', 'getAllBook', 'getAllFile', 'fetchUserOrder']),
    bindIMG,
    async removeCart (item) {
      const { success } = await this.$api.deleteShoppingCar(item.id)
      success && this.fetchData()
    },
    handleGoods (i) {
      return {
        createTime: Date.now(),
        goodsId: i.goods.id,
        goodsName: i.goods.name,
        num: 1,
        price: i.goods.price,
        status: 0,
        updateTime: Date.now(),
        userId: i.userId
      }
    },
    async purchaseGoods (i) {
      const { success } = await this.$api.addGoodsOrder(this.handleGoods(i))
      success && this.removeCart(i)
      success && this.fetchData()
    },
    async purchaseAll () {
      if (this.flagList.some((i) => i)) {
        return this.$message.error('存在失效商品，请先删除')
      }
      const cartList = []
      this.myCartList.forEach((i) => {
        cartList.push(this.handleGoods(i))
      })
      const { success } = await this.$api.addGoodsOrderList(cartList)
      success && this.clearShopCar()
    },
    async clearShopCar () {
      const ids = this.myCartList.map((i) => i.id)
      const { success } = await this.$api.deleteShoppingCarList(ids)
      success && this.fetchData()
    },
    fetchData () {
      this.fetchMyCart()
      this.getAllBook()
    },
    gotoDetail (i) {
      console.log(11)
      this.$router.push({ name: 'bookDetail', params: { id: i.goodsId } })
    }
  },
  mounted () {
    this.fetchUserOrder()
    this.getAllFile()
    this.fetchData()
  }
}
</script>

<style lang="less" scoped>
// @import '~@css/variables.less';

.cart-title {
  letter-spacing: 4px;
  font-size: 30px;
  padding-bottom: 20px;
  color: #eba613;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}

.cart-tb {
  padding: 0 10px;

  ::v-deep.cart-col {
    padding: 20px 0;

    .img {
      width: 100px;
      margin: 0 auto;
    }

    &.goods {
      display: flex;
    }

    &.info {
      padding-right: 40px;

      p {
        margin: 0;
      }

      .goods-title {
        font-size: 20px;

        &:hover {
          color: #eba613;
          text-decoration: underline;
          cursor: pointer;
        }
      }

      .goods-desc {
        margin-top: 20px;
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: 1px;
        color: #444;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }

    &.price {
      display: flex;
      justify-content: center;
      height: 100%;

      span {
        color: #eba613;
        font-size: 24px;
      }
    }

    &.handle {
      display: flex;
      align-items: center;
      justify-content: space-around;

      [class^='link-'] {
        display: inline-block;
        font-size: 16px;
        background-color: #eba613;
        padding: 6px 16px;
        color: #fff;
        border-radius: 6px;

        &:hover {
          cursor: pointer;
          opacity: 0.7;
        }
      }

      .link-del {
        background-color: #95a5a6;
      }
    }
  }
}

.cart-tool {
  display: flex;
  align-items: center;
  padding-left: 20px;
  height: 70px;
  background-color: #f7f7f7;

  .cart-clear {
    color: #eba613;
    margin-right: auto;

    &:hover {
      text-decoration: underline;
    }
  }

  .cart-total {
    display: flex;
    align-items: center;

    &__p {
      display: flex;
      align-items: center;
      height: 40px;
      margin: 0;
      margin-right: 30px;

      span {
        color: #eba613;
        font-size: 16px;
        margin: 0 4px;
      }

      .num {
        font-size: 20px;
      }

      .price {
        font-size: 24px;
      }
    }
  }

  .btn-all {
    border: none;
    height: 50px;
    line-height: 50px;
    background-color: #eba613;
    padding: 0 40px;
    border-radius: 8px;
    color: #fff;

    &:hover {
      cursor: pointer;
      opacity: 0.7;
    }
  }
}

.cart {
  border-radius: 10px;
  background-color: #fff;
  padding: 20px;
}

.link {
  color: #eba613;
}
</style>
